<template>
  <!-- 运行页面 -->
  <Split v-model="split" mode="vertical" min="200px">
    <template #top>
      <OperationQueryForm @save-case="handleSaveCase" :data="tabData.info" @debug="handleDebug"
        @form-value="handleFormValue" @save="handleSave" @to-delete="handleToDelete" @open-env="updateEnv" />
      <QueryCom :isenable="false" :editor="true" :data="tabData.info" :id="tabData.id"
        @query-com-value="handleQueryComValue" />
    </template>
    <template #bottom>
      <ResponseCom :data="tabData.response" />
    </template>
  </Split>
</template>

<script setup lang="ts">
import * as DebugApi from '@/api/debug'
import OperationQueryForm from './OperationQueryForm.vue'
import QueryCom from './QueryCom.vue'
import ResponseCom from './/ResponseCom.vue';
import { propTypes } from '@/utils/propTypes'
import { useAppStore } from '@/store/modules/app'
const message = useMessage() // 消息
const { t } = useI18n() // 国际化
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const emit = defineEmits(['save-case', 'debug', 'queryComValue', 'save', 'delete-node', 'open-env'])
const props = defineProps({
  tabData: propTypes.object.def({})
})

watch(() => props.tabData, () => {
  console.log(props.tabData)
}, {
  deep: true
})
const split = ref(0.5)
/** 向上传递参数变量 */
let queryValue = {} as any
const handleSaveCase = () => {
  emit('save-case')
}
const handleDebug = () => {
  emit('debug')
}
const handleSave = () => {
  emit('save')
}
const handleToDelete = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm(`确定删除【${props.tabData.title}-${props.tabData.subTitle}】用例？`)
    // 发起删除
    await DebugApi.deleteCaseInTree({ id: props.tabData.id, parentId: props.tabData.directId, projectId: projectId.value })
    message.success(t('common.delSuccess'))
    emit('delete-node', props.tabData)
  } catch (error) {
    console.log(error)
  } finally {
  }
}
/** 向上传递form、请求参数变量 */
const handleFormValue = (value) => {
  queryValue = {
    ...queryValue,
    query: value
  }
  emit('queryComValue', queryValue)
}
/** 向上传递form、请求参数变量 */
const handleQueryComValue = (value) => {
  queryValue = {
    ...queryValue,
    ...value
  }
  emit('queryComValue', queryValue)
}
/** 打开环境管理 */
const updateEnv = () => {
  emit('open-env')
}
function dragControllerUD() {
  const resize = document.getElementsByClassName("move-" + props.tabData.name);
  const topBox = document.getElementsByClassName("topBox-" + props.tabData.name);
  const downBox = document.getElementsByClassName("downBox-" + props.tabData.name);
  const box = document.getElementsByClassName("mid");
  for (let i = 0; i < resize.length; i++) {
    // 鼠标按下事件
    resize[i].onmousedown = function (e) {
      //颜色改变提醒
      resize[i].style.background = "#818181";
      const startY = e.clientY;
      resize[i].top = resize[i].offsetTop;
      // 鼠标拖动事件
      document.onmousemove = function (e) {
        const endY = e.clientY;
        let moveLen = resize[i].top + (endY - startY); // （endY - startY）=移动的距离。resize[i].top+移动的距离=上边区域最后的高度
        const maxT = box[i].clientHeight - resize[i].offsetHeight; // 容器高度 - 上边区域的高度 = 下边区域的高度

        if (moveLen < 50) moveLen = 50; // 上边区域的最小高度为50px
        if (moveLen > maxT - 150) moveLen = maxT - 150; //下边区域最小高度为150px

        resize[i].style.top = moveLen; // 设置上边区域的高度

        for (let j = 0; j < topBox.length; j++) {
          topBox[j].style.height = moveLen + "px";
          downBox[j].style.height = box[i].clientHeight - moveLen - 110 + "px";
        }
      };
      // 鼠标松开事件
      document.onmouseup = function () {
        //颜色恢复
        resize[i].style.background = "#d6d6d6";
        document.onmousemove = null;
        document.onmouseup = null;
        resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      };
      resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false;
    };
  }
}
onMounted(() => {
  dragControllerUD()
})
</script>

<style scoped>
/*上方div'样式*/
.topBox {
  height: 50%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--el-border-color-light);
}

/*下方div'样式*/
.downBox {
  height: calc(50% - 10px);
  display: flex;
  box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.11);
}

/* 拖拽区div样式 */
.move {
  cursor: s-resize;
  width: 50px;
  height: 10px;
  background-color: #d6d6d6;
  margin: 0 auto;
  border-radius: 5px;
  text-align: center;
  line-height: 3px;
  font-size: 32px;
  color: white;
  z-index: 99;
  position: relative;
}

.ivu-split-pane {
  overflow: auto;
}
</style>
